<template>
	<view>
		<!-- <van-button type="primary">按钮</van-button> -->


		<van-search shape="round" :value="value" placeholder="请输入搜索关键词" />

		<view class="nav_tab">
			<view class="tab_item_a" :class="{ act: act == 0 }" @click="switchMain(0)">
				最近关注
			</view>
			<view class="tab_item_a" :class="{ act: act == 1 }" @click="switchMain(1)">
				由低到高
			</view>
			<view class="tab_item_a" :class="{ act: act == 2 }" @click="switchMain(2)">
				由高到低
			</view>
			<view style="display: flex;align-items: center;" class="tab_item_a" @tap="changeShow">
				<image style="width: 28rpx;height: 28rpx;margin-right: 10rpx;"
					src="https://daiyue.gzzhenyi.net/static/image/user/bianji2@1x.png" mode="aspectFit"></image>
				管理
			</view>
		</view>
		<swiper @change="changeSwiper" :current="currIndex" :style="{ height: swiperHeight + 'px' }">
			<swiper-item v-for="(item, i) in tab" :key="i">
				<view :id="'wrap' + i" class="swiper-item">
					<view class="item_card" v-for="(e, index) in shopList" :key="e.goods.id" @click="toDetails(e.goods.id)">
						<view class="title_msg">
							<view class="img">
								<image style="width: 100rpx;height: 100rpx;" :src="baseUrl + e.goods.image"
									mode="aspectFill">
								</image>
							</view>

							<view class="right">
								<view class="top">
									<view class="top_lf">
										<text class="title">{{ e.goods.title }}</text>
										<text class="note">{{ e.goods.description }}</text>
									</view>
									<van-checkbox v-if="isShow" checked-color="#FF6200" icon-size="36rpx"
												style="font-size: 36rpx;width: 36rpx;" :value="e.isShow"
												@change="onChange(event, index)"></van-checkbox>
								</view>
								<view class="bottom">
									<text class="orign">￥{{ e.goods.market_price }}</text>
									<image @click="toDetails(e.goods.id,'show')" src="../../static/gwc.png" mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>
					<van-empty :image="images" image-size="100rpx" description="暂无收藏商品" v-if="shopList.length == 0">
						<button class="bottom-button" @click="goBack">返回</button>
					</van-empty>
				</view>
			</swiper-item>
		</swiper>


		<view class="foot_jie" v-if="isShow">
			<text>已选{{ selectList.length }}件商品</text>
			<view class="btn" @tap="toCacle">
				取消收藏
			</view>
		</view>
	</view>
</template>

<script>
	import images from '../../static/index/wu.png'
	import {
		getCollectlist,
		collect,
		handleCart
	} from '@/api/api'
	import baseUrl from '@/api/baseUrl';
	export default {
		data() {
			return {
				images,
				baseUrl,
				selectList: [],
				isShow: false,
				currIndex: 0,
				swiperHeight: 0, // 滑块的高度(单位px)
				act: 0,
				value: "",
				tab: ["最近关注", "由低到高", "由高到低"],
				spanList: ["限时抢购", "上新品", ""],
				// 模拟数据
				shopList: []
			}
		},

		onLoad() {
			setTimeout(this.setSwiperHeight, 10)
			this.follow()
		},

		methods: {
			follow() {
				getCollectlist({
					sort: this.currIndex == 3 ? 0 : this.currIndex + 1,
				}).then(res => {
					if (res.code == 1) {
						console.log(res)
						this.shopList = res.data
						console.log(this.shopList)
						return uni.setNavigationBarTitle({
							title: `收藏商品（${this.shopList.length}）`
						})
					}
					uni.setNavigationBarTitle({
						title: `收藏商品`
					})
				})
			},
			goBack() {
				uni.navigateBack()
			},
			
			toCacle() {
				this.shopList.forEach((e, a) => {
					// console.log(a,i)
					if (this.shopList[a]?.isShow == 1) {
						// console.log(a)
						// this.shopList.splice(a, 1)
						collect({
							goods_id: this.shopList[a].goods.id
						}).then(res => {
							if (res.code == 1) {
								this.follow()

							} else {

								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}

						})
					}
				})
			},

			onChange(event, i) {
				this.shopList.forEach((e, a) => {
					// console.log(a,i)
					if (a == i) {
						if (this.shopList[a].isShow == 1) {
							this.shopList[a].isShow = 0
							this.selectList.splice(a, 1)
						} else {
							this.shopList[a].isShow = 1
							this.selectList.push(this.shopList[a])
						}

					}
				})

			},

			changeShow() {
				this.isShow = !this.isShow
			},

			comData(num) {
				if (num == 0) {
					return "今日收藏"
				} else {
					return `${num}天前收藏`
				}
			},

			toDetails(id,show) {
				if(show){
					uni.navigateTo({
						url: `/long/productDetail/productDetail?id=${id}&show=${show}`
					})
				}else{
					uni.navigateTo({
						url: `/long/productDetail/productDetail?id=${id}`
					})
				}
			},

			switchMain(num) {
				this.currIndex = num
				this.act = num
				this.follow()
			},
			/* 切换 swiper 滑块 */
			changeSwiper(e) {
				this.currIndex = e.detail.current;
				this.act = this.currIndex
				this.follow()
				setTimeout(this.setSwiperHeight, 10)
			},

			/* 动态设置 swiper 的高度 */
			setSwiperHeight() {
				const element = "#wrap" + this.currIndex;
				const query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec(res => {
					if (res && res[0]) this.swiperHeight = res[0].height;
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bottom-button {
		box-sizing: border-box;
		border: 1px solid #FDA423;
		border-radius: 50upx;
		padding: 0upx 50upx;
		color: #FDA423;
		font-size: 28upx;
	}

	.foot_jie {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		// height: 162rpx;
		background-color: #fff;
		width: 680rpx;
		padding: 16rpx 20rpx 66rpx 50rpx;

		text {
			font-size: 24rpx;
			font-weight: normal;
			line-height: 30rpx;
			color: #5C5C5C;
			display: inline-block;


		}

		.btn {
			width: 180rpx;
			height: 70rpx;
			border-radius: 35px;
			background: #FF6200;
			font-size: 30rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.swiper-item {
		display: flex;
		flex-direction: column;
		align-items: center;


		// background-color: #fff;


		.item_card {
			width: 670rpx;
			padding: 30rpx 20rpx 22rpx 20rpx;
			border-radius: 16rpx;
			background-color: #fff;
			// margin-top: 22rpx;
			box-shadow: 4rpx solid #eee;
			margin: 22rpx 0;

			.title_msg {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.img {
					width: 196.2rpx;
					height: 146.7rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					border-radius: 5rpx;
					opacity: 1;
					background: #FFFFFF;
					box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.06);
					flex-shrink: 0;

					image {
						width: 50%;
					}
				}

				.right {
					margin-left: 20rpx;
					width: 570rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					row-gap: 12rpx;

					.top {
						display: flex;
						justify-content: space-between;

						.top_lf {
							display: flex;
							flex-direction: column;
							row-gap: 8rpx;

							.title {
								font-size: 26rpx;
							}

							.note {
								font-size: 20rpx;
								color: #5C5C5C;
							}
						}
					}

					.bottom {
						margin-top: 14rpx;
						font-weight: normal;
						letter-spacing: 0px;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.orign {
							font-size: 25rpx;
							color: #FF6200;
						}

						image {
							width: 38rpx;
							height: 38rpx;
						}
					}
				}
			}
		}
	}

	.nav_tab {
		width: 660rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// justify-content: space-evenly;
		padding: 20rpx 40rpx;
		background-color: #fff;

		.tab_item_a {

			font-family: PingFang SC;
			font-size: 26rpx;
			font-weight: normal;
			line-height: 30rpx;
			text-align: center;
			letter-spacing: 0px;
			color: #5C5C5C;
		}

		.act {
			font-size: 28rpx;
			font-weight: bold;
			line-height: 30rpx;
			letter-spacing: 0px;
			color: #000;
		}
	}

	.nav_title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;

		.nav_left {
			display: flex;
			align-items: center;
			margin-left: 32rpx;

			text {
				font-family: PingFang SC;
				font-size: 26rpx;
				font-weight: normal;
				line-height: 22rpx;
				letter-spacing: 0rpx;
			}
		}
	}
</style>